<template>
	<view>
		<!-- 轮播 -->
		<view class="banner">
			<swiper :autoplay="true"
			        :indicator-dots="true"
					indicator-color="rgba(255,255,255, .5)"
					indicator-active-color="#ff372b"
					:interval="3000"
					:duration="500">
					
					<swiper-item v-for="(item,index) in swiper" :key="index">
						<view class="item">
							<image :src="item.pic" class="img"></image>
							<view class="tag">{{item.typeTitle}}</view>
						</view>
					</swiper-item>
			</swiper>
		</view>
		
		<!-- 主入口 -->
		<view class="main-bar flex-box">
			<view class="flex-item" v-for="(item,index) in contentBar" :key="index">
				<image :src="'../../static/image/index/t_'+(index+1)+'.png'" class="img"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		
		
	</view>
</template>

<script >
	import {apiGetBanner} from '@/apis/index.js'
	export default {
		data() {
			return {
				swiper: [],
				contentBar:[
					{name:'每日推荐'},
					{name:'歌单'},
					{name:'排行榜'},
					{name:'电台'},
					{name:'直播'}
				]
			}
		},
		onLoad() {
			this.getBanner();
		},
		methods: {
			getBanner(){
				apiGetBanner({ clientType: 'iphone' }).then(res=>{
					this.swiper=res.banners
				})
				// uni.request({
				// 	url:'/api/v2/banner/get',
				// 	// url:'http://localhost:3000/banner',
				// 	method:'POST',
				// 	data:{
				// 		'clientType':'iphone'
				// 	},
				// 	header:{
				// 		'content-type':'application/x-www-form-urlencoded'
				// 	},
				// 	success: (resp) => {
				// 		console.info(resp);
				// 		console.info(resp.data)
				// 		console.info(resp.data.banners)
				// 		this.swiper=resp.data.banners
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
				color: #1a1a1a;
				font-size: 24rpx;
			}
			
			.banner {
				width: 100%;
				height: 268rpx;
				margin: 30rpx auto 44rpx;
				.swiper{
					height: 268rpx;
				}
				.item{
					position:relative;
					display: block;
					width: 686rpx;
					height: 268rpx;
					margin: 0 auto;
					border-radius: 14rpx;
					overflow: hidden;
				}
				.img {
					display: block;
					width: 100%;
					height: 100%;
					
				}
				.tag{
					position:absolute;
					bottom:0;
					right:0;
					height:34rpx;
					padding:0 14rpx;
					line-height: 34rpx;
					color:#fff;
					background: #43a5f0;
					z-index: 10;
					border-top-left-radius: 14rpx;
				}
			}
			.main-bar{
				padding-bottom: 22rpx;//内边距
				text-align: center;
				line-height: 70rpx;//行高
				color: #666;
				border-bottom: 1rpx solid #e6e6e6;//下边框
				.img{
					display: block;
					height: 92rpx;
					width: 92rpx;
					margin: 0 auto;
				}
				.flex-item{
					position: relative; //相对定位
					.date{
						position: absolute; // 绝对定位
						left: 60rpx;
						top: 40rpx;
						line-height: 1;
						font-size: 24rpx;
						color:#ff392d;
						transform:scale(0.8);
					}
				}
			}
		
		
	/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
	/* #ifdef MP-WEIXIN */
	.banner{
		margin-top:60rpx;
	}
	/* #endif */
</style>
